<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Very-Axios | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/18.d89ca224.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/13.20c94e2c.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/15.fc48fa10.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/20.a0711b97.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/24.a88ce84e.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/29.60c8dbe1.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" class="nav-link">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>插件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/plugin/" aria-current="page" class="sidebar-link">概述</a></li><li><a href="/plugin/HRM-Player.html" class="sidebar-link">HRM-Player 播放器</a></li><li><a href="/plugin/Vue-Flv-Player.html" class="sidebar-link">Vue-Flv-Player 播放器</a></li><li><a href="/plugin/Calendar.html" class="sidebar-link">Calendar 日历</a></li><li><a href="/plugin/Very-Axios.html" aria-current="page" class="active sidebar-link">Very-Axios</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#功能列表" class="sidebar-link">功能列表</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#基础用法" class="sidebar-link">基础用法</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#自定义错误提示函数" class="sidebar-link">自定义错误提示函数</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#自定义错误处理函数" class="sidebar-link">自定义错误处理函数</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#hooks" class="sidebar-link">Hooks</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#自定义错误信息及数据的获取" class="sidebar-link">自定义错误信息及数据的获取</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#validatestatus自主校验接口状态" class="sidebar-link">validateStatus自主校验接口状态</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#配置可取消重复请求自动" class="sidebar-link">配置可取消重复请求自动</a></li><li class="sidebar-sub-header"><a href="/plugin/Very-Axios.html#获取原始-axios-对象" class="sidebar-link">获取原始 axios 对象</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="very-axios"><a href="#very-axios" class="header-anchor">#</a> Very-Axios</h1> <p>基于  <code>axios</code>  进行二次封装，更简单、更统一地使用  <code>axios</code> 。</p> <h2 id="功能列表"><a href="#功能列表" class="header-anchor">#</a> 功能列表</h2> <ul><li>封装调用方式统一的  <code>GET/POST/PUT/DELETE/FORMDATA</code>  方法</li> <li>自定义接口调用失败时如何处理错误提示（可开关）</li> <li>常见 HTTP 状态码的中英文提示  <code>400/401/403/404/405/413/414/500/502/504</code></li> <li>自定义错误处理函数，可以根据状态码指定不同错误类型的自定义操作：如 403 跳转到指定页面</li> <li><code>hooks</code>  方法
<ul><li><code>beforeHook(config)</code>  接口请求前自定义操作：如可以在请求时给页面添加蒙层，加载中效果</li> <li><code>afterHook(responce/error, isError)</code>  接口返回后自定义操作：如取消 loading 效果、处理返回数据的数据结构等</li></ul></li> <li>兼容错误信息在  <code>200</code>  请求情况
<ul><li>指定获取状态码函数  <code>getResStatus(resData)</code> ，获取 response 中的错误码</li> <li>指定获取错误消息函数  <code>getResErrMsg(resData)</code> ，获取 response 中的错误消息</li> <li>指定获取返回最终数据函数  <code>getResData(resData)</code> ，获取 response 中的返回数据</li></ul></li> <li><code>validateStatus</code>  自主校验接口状态</li> <li>配置可取消重复请求
<ul><li>在  <code>new VeryAxios</code>  实例时，配置 <code>cancelDuplicated: true</code>  可开启取消重复的请求</li> <li>在  <code>new VeryAxios</code>  实例时， <code>duplicatedKeyFn</code>  函数可配置统一的重复请求的标识</li> <li>在请求时可自定义配置单个请求的重复标识 <code>duplicatedKey</code></li></ul></li></ul> <h2 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h2> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> -S very-axios
</code></pre></div><h3 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h3> <p>可以通过以下方法  <code>new</code>  一个 VeryAxios 的实例，第一个参数  <code>veryAxiosConfig</code>  为  <code>very-axios</code>  的配置，第二个参数  <code>axiosConfig</code>  为 axios 所支持的配置。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// request.js</span>
<span class="token keyword">import</span> VeryAxios <span class="token keyword">from</span> <span class="token string">'very-axios'</span>
<span class="token comment">// 此处 veryAxiosConfig, axiosConfig 未定义，下面会详细介绍 veryAxiosConfig</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VeryAxios</span><span class="token punctuation">(</span>veryAxiosConfig<span class="token punctuation">,</span> axiosConfig<span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">list</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">add</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">POST</span><span class="token punctuation">(</span><span class="token string">'/user'</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">update</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">id<span class="token punctuation">,</span> params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">PUT</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/user/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">delete</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">DELETE</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/user/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">deletes</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">DELETE</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/user/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token function-variable function">upload</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> request<span class="token punctuation">.</span><span class="token constant">FORMDATA</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/user/</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>veryAxiosConfig</code>  支持以下配置：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token comment">// 发生错误时，是否显示提示</span>
  tip<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// default</span>

  <span class="token comment">// 如何显示提示，可以传入显示message的方法</span>
  <span class="token function-variable function">tipFn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">message</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  errorHandlers<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 支持 400/401/403/404/405/413/414/500/502/504/任意其他 errno</span>
    <span class="token comment">// 401: () =&gt; {}</span>
    <span class="token comment">// 403: () =&gt; {}</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 内置错误提示语言: 'zh-cn'/'en'</span>
  lang<span class="token operator">:</span> <span class="token string">'zh-cn'</span><span class="token punctuation">,</span> <span class="token comment">// default</span>

  <span class="token comment">// 请求前的自定义操作</span>
  <span class="token function-variable function">beforeHook</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 请求后的自定义操作</span>
  <span class="token function-variable function">afterHook</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">responce<span class="token operator">|</span>error<span class="token punctuation">,</span> isError</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token comment">// 从请求响应中获取错误状态，默认取errno</span>
  <span class="token comment">// 如果传入的不是一个函数也会使用默认值</span>
  <span class="token function-variable function">getResStatus</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">resData</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> resData<span class="token punctuation">.</span>errno<span class="token punctuation">,</span> <span class="token comment">// default</span>

  <span class="token comment">// 从请求响应中获取错误消息，默认取errmsg</span>
  <span class="token comment">// 如果传入的不是一个函数也会使用默认值</span>
  <span class="token function-variable function">getResErrMsg</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">resData</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> resData<span class="token punctuation">.</span>errmsg<span class="token punctuation">,</span> <span class="token comment">// default</span>

  <span class="token comment">// 从请求响应中获取返回数据，默认取data</span>
  <span class="token comment">// 如果传入的不是一个函数也会使用默认值</span>
  <span class="token function-variable function">getResData</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">resData</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> resData<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token comment">// default</span>
  
  <span class="token comment">// 是否开启取消重复请求</span>
  cancelDuplicated<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// default</span>
    
  <span class="token comment">// 如果开启了取消重复请求，如何生成重复标识</span>
  <span class="token function-variable function">duplicatedKeyFn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>method<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>config<span class="token punctuation">.</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token comment">// default</span>
<span class="token punctuation">}</span>
</code></pre></div><p>VeryAxios 实例支持 GET/POST/PUT/DELETE/FORMDATA 实例方法，并且调用方式统一。</p> <ul><li><code>request.GET(path, params, config)</code></li> <li><code>request.POST(path, params, config)</code></li> <li><code>request.PUT(path, params, config)</code></li> <li><code>request.DELETE(path, params, config)</code></li> <li><code>request.FORMDATA(path, params, config)</code></li></ul> <p><code>path</code>  为请求路径；</p> <p><code>params</code>  为请求参数，GET/FORMDATA 的参数也不用特殊处理，very-axios 会统一处理，其中 FORMDATA 的  <code>Content-Type</code>  为  <code>multipart/form-data;charset=UTF-8</code></p> <p><code>config</code>  为 axios 配置，内部新增了  <code>veryConfig</code>  字段用于 VeryAxios 调用实例方法时传入配置，后续会介绍</p> <h2 id="自定义错误提示函数"><a href="#自定义错误提示函数" class="header-anchor">#</a> 自定义错误提示函数</h2> <p>当接口报错时，我们通常会对错误信息进行提示。VeryAxios 提供了统一的方式来处理错误消息。在 VeryAxiosConfig 中指定  <code>tipFn(errmsg)</code>  可以指定错误消息的处理方式，指定  <code>tip</code> （布尔值）可以开关是否执行错误提示。</p> <p>如下，我们可以将  <code>tipFn</code>  指定为  <code>alert</code> ，则错误信息会使用  <code>alert</code>  函数弹出提醒。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// request.js</span>
<span class="token keyword">import</span> VeryAxios <span class="token keyword">from</span> <span class="token string">'very-axios'</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VeryAxios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token function-variable function">tipFn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> alert
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>VeryAxios 内置了常见 HTTP 错误的中英文提示，如  <code>401</code>  对应 “未授权，请确认是否登录” / “Unauthorized”。可以通过配置中的  <code>lang</code>  指定提示的语言。</p> <p>有些时候，我们可能想要只针对某个接口禁用 tip，这可以在调用接口时传入第三个参数，如下，可以禁用该接口发生错误时的错误提示。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 禁用 tip</span>
request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> params<span class="token punctuation">,</span> <span class="token punctuation">{</span> veryConfig<span class="token operator">:</span> <span class="token punctuation">{</span> disableTip<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="自定义错误处理函数"><a href="#自定义错误处理函数" class="header-anchor">#</a> 自定义错误处理函数</h2> <p>使用  <code>axios</code>  进行接口请求发生错误时，一般会有两种，一种是  <code>validateStatus</code>  不通过时（默认是  <code>2xx</code>  通过） ，另一种是所有接口错误信息都由  <code>200</code>  状态返回，返回结果中带有固定字段表示，如  <code>errno/errmsg</code> 。</p> <p>在接口请求的过程中，我们有时会需要对于对某些特殊的错误进行一些额外的操作，如  <code>403</code>  的时候跳转到无权限的错误提示页。</p> <p>这时候，我们可以在配置中添加相应的错误处理函数 <code>errorHandlers</code> ，可以给不同的错误码指定不同的处理函数，并且支持自定义的  <code>errno</code> 。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// request.js</span>
<span class="token keyword">import</span> VeryAxios <span class="token keyword">from</span> <span class="token string">'very-axios'</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VeryAxios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  errorHandlers<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 支持 400/401/403/404/405/413/414/500/502/504/任意其他 errno</span>
    <span class="token number">401</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token number">403</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token comment">// 任意自定义errno</span>
    <span class="token number">1002</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="hooks"><a href="#hooks" class="header-anchor">#</a> Hooks</h2> <p>VeryAxios 在请求前和请求后都留了钩子，以备需要在这两个时机进行特殊的处理。</p> <ul><li><p>beforeHook (config) 接口请求前的钩子函数</p> <p>在接口请求前触发，可以在请求时给页面添加蒙层，加载中效果。 <code>config</code>  参数是最后发送请求时的配置。</p> <blockquote><p>config 为引用传值，可以对该引用的值进行修改，修改后会影响提交的配置</p></blockquote></li> <li><p>afterHook (responce/error, isError) 接口返回后钩子函数</p> <p>在接口请求返回后触发，可以进行取消 loading 效果、处理返回的数据结构等操作。其中第一个参数在请求成功时是接口返回的响应 <code>response</code> ，在接口失败时，是返回的错误对象。第二个参数标识是否是错误返回。</p> <blockquote><p>response 为引用传值，可以对该引用的值进行修改，如对返回的数据结构进行调整</p></blockquote></li></ul> <p>通常我们会在实例化时进行通用的钩子函数定义。但可能存在某些特殊的请求，不需要执行 hooks，这时候我们可以在单独的请求中，指定是否禁用 hooks 以及禁用哪一个 hooks。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 禁用全部 hooks</span>
request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> params<span class="token punctuation">,</span> <span class="token punctuation">{</span> veryConfig<span class="token operator">:</span> <span class="token punctuation">{</span> disableHooks<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 禁用 before hooks</span>
request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> params<span class="token punctuation">,</span> <span class="token punctuation">{</span> veryConfig<span class="token operator">:</span> <span class="token punctuation">{</span> disableHooks<span class="token operator">:</span> <span class="token punctuation">{</span> before<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 禁用 afater hooks</span>
request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> params<span class="token punctuation">,</span> <span class="token punctuation">{</span> veryConfig<span class="token operator">:</span> <span class="token punctuation">{</span> disableHooks<span class="token operator">:</span> <span class="token punctuation">{</span> after<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="自定义错误信息及数据的获取"><a href="#自定义错误信息及数据的获取" class="header-anchor">#</a> 自定义错误信息及数据的获取</h2> <p>前面提到，接口在返回错误时有两种常见方案，其中一种是全部  <code>200</code>  返回，通过特定字段标识是否是错误，如  <code>errno</code>  表示错误号，非 0 则为错误； <code>errmsg</code>  表示错误信息； <code>data</code>  为返回的数据。这也是 VeryAxios 的默认值。</p> <p>当然，有些时候，接口并非我们预想的这样统一，我们可以通过以下三个函数分别指定如何从 reponse data 中获取上述的三个值。</p> <ul><li>getResStatus (resData)，获取 response 中的错误码，默认值  <code>(resData) =&gt; resData.errno</code></li> <li>getResErrMsg (resData)，获取 response 中的错误消息，默认值  <code>(resData) =&gt; resData.errmsg</code></li> <li>getResData (resData)，获取 response 中的返回数据，默认值  <code>(resData) =&gt; resData.data</code></li></ul> <h2 id="validatestatus自主校验接口状态"><a href="#validatestatus自主校验接口状态" class="header-anchor">#</a> <code>validateStatus</code>  自主校验接口状态</h2> <p>与  <code>axios</code>  中默认的  <code>validateStatus</code>  配置略有不同， <code>very-axios</code>  中的默认值为  <code>(status) =&gt; status === 0 || (status &gt;= 200 &amp;&amp; status &lt; 300)</code> ，主要是兼容了错误码由正确响应返回的情况。这时， <code>status</code>  通常可能为 <code>0</code> ，有可能是正确的状态码  <code>2xx</code> ，所以加了一个可以判断的逻辑。特殊情况修改该判断逻辑即可。该配置不影响  <code>axios</code>  中  <code>validateStatus</code>  的判断逻辑，如果两个地方都需要，需要分别指定。</p> <h2 id="配置可取消重复请求自动"><a href="#配置可取消重复请求自动" class="header-anchor">#</a> 配置可取消重复请求自动</h2> <p>如果开启了取消重复请求，但是没有配置 <code>duplicatedKeyFn</code>  和  <code>duplicatedKey</code> ，那么默认的重复请求标识为： <code>${config.method}${config.url}</code> 。如果同时配置了 <code>duplicatedKeyFn</code>  和  <code>duplicatedKey</code> ，那么 <code>duplicatedKey</code>  的优先级高于 <code>duplicatedKeyFn</code></p> <ul><li><p>在  <code>new VeryAxios</code>  实例时，配置 <code>cancelDuplicated: true</code>  可开启取消重复的请求</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> veryAxiosConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  cancelDuplicated<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VeryAxios</span><span class="token punctuation">(</span>veryAxiosConfig<span class="token punctuation">)</span>
</code></pre></div></li> <li><p>在  <code>new VeryAxios</code>  实例时， <code>duplicatedKeyFn</code>  函数可配置统一的重复请求的标识</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> veryAxiosConfig <span class="token operator">=</span> <span class="token punctuation">{</span>
  cancelDuplicated<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token function-variable function">duplicatedKeyFn</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> method<span class="token punctuation">,</span> url<span class="token punctuation">,</span> responseType <span class="token punctuation">}</span> <span class="token operator">=</span> config
    <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>method<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>responseType<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VeryAxios</span><span class="token punctuation">(</span>veryAxiosConfig<span class="token punctuation">)</span>
</code></pre></div></li> <li><p>在请求时的可自定义配置单个请求的重复标识 <code>duplicatedKey</code></p> <div class="language-js extra-class"><pre class="language-js"><code>request<span class="token punctuation">.</span><span class="token constant">GET</span><span class="token punctuation">(</span>path<span class="token punctuation">,</span> params<span class="token punctuation">,</span> <span class="token punctuation">{</span> veryConfig<span class="token operator">:</span> <span class="token punctuation">{</span> duplicatedKey<span class="token operator">:</span> <span class="token string">'duplicatedKey'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></li></ul> <h2 id="获取原始-axios-对象"><a href="#获取原始-axios-对象" class="header-anchor">#</a> 获取原始  <code>axios</code>  对象</h2> <p>如果你现有项目已经使用了  <code>axios</code> ，需要兼容旧的逻辑，可以通过以下方式获取原始  <code>axios</code>  的引用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> VeryAxios<span class="token punctuation">,</span> <span class="token punctuation">{</span> originalAxios <span class="token keyword">as</span> axios <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'very-axios'</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/plugin/Calendar.html" class="prev">
        Calendar 日历
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/18.d89ca224.js" defer></script>
  </body>
</html>
